<script setup>
import { useFormulaStore } from '@/store/formulaStore'
import { ref } from 'vue'

const formulaStore = useFormulaStore()
const newFormula = ref('z = 0')

const handleUpdate = (formula) => {
  formulaStore.updateFormula(formula)
}

const addFormula = () => {
  formulaStore.addFormula({
    expression: newFormula.value,
    color: '#0000ff',
  })
  newFormula.value = 'z = 0'
}
</script>

<template>
  <div class="editor">
    <div v-for="formula in formulaStore.sortedFormulas" :key="formula.id">
      <input
        v-model="formula.expression"
        class="formula-input"
        @input="handleUpdate(formula)"
      />
      <button @click="formula.visible = !formula.visible">
        {{ formula.visible ? 'Hide' : 'Show' }}
      </button>
    </div>

    <div class="new-formula">
      <input v-model="newFormula" @keyup.enter="addFormula" />
      <button @click="addFormula">Add Formula</button>
    </div>
  </div>
</template>

<style>
.editor {
  position: fixed;
  right: 20px;
  top: 20px;
  background: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 8px;
  color: white;
}

.formula-input {
  width: 300px;
  margin: 5px;
  padding: 8px;
  background: #333;
  border: 1px solid #666;
  color: white;
}

button {
  padding: 8px 12px;
  background: #007bff;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
}

.new-formula {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #444;
}
</style>
